<template>
    <Popup ref="popupRef">
        <div class="flex flex-col pt-4 bg-white h-5/6 rounded-t-2xl">
            <div class="px-4 shrink-0">
                <div class="flex items-center pb-4 bg-white ">
                    <img :src="src" class="object-cover w-24 h-24 rounded-lg" />
                    <div class="ml-4">
                        <div class="flex items-end space-x-2">
                            <div class="text-2xl text-red-400">¥299</div>
                            <div class="relative text-sm text-gray-400 line-through -top-px">¥399</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-4 pb-8 overflow-y-auto grow">
                <div class="mt-2 space-y-6 sku">
                    <div v-for="(item, index) in skus">
                        <div class="text-sm">{{ item.name }}</div>
                        <div class="flex flex-wrap gap-4 mt-2 text-xs text-gray-600">
                            <div v-for="(v, k) in item.values">
                                <div @click="skuSelected[index] = k"
                                    class="px-2 py-1 bg-gray-100 border border-transparent rounded-sm" :class="{
                                        ' bg-red-50 text-red-400 border-red-200': skuSelected[index] == k
                                    }">
                                    {{ v.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="text-sm">数量</div>
                        <div class="text-xs text-gray-600 ">
                            <VanStepper v-model="number" button-size="24px" />
                        </div>
                    </div>

                    <div v-for="(item, index) in services">
                        <div class="text-sm">{{ item.name }}</div>
                        <div class="flex flex-wrap gap-4 mt-2 text-xs text-gray-600">
                            <div v-for="(v, k) in item.values">
                                <div @click="serviceSelected[index] = k"
                                    class="px-2 py-1 bg-gray-100 border border-transparent rounded-sm" :class="{
                                        ' bg-red-50 text-red-400 border-red-200': serviceSelected[index] == k
                                    }">
                                    {{ v.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="p-3 text-sm text-center text-white border-t shrink-0">
                <div v-if="goods.addType" @click="confirm()" class="p-2 bg-red-400 rounded-lg">
                    确定
                </div>
                <div v-else class="grid grid-cols-2 gap-x-4 grow">
                    <div class="grid p-2 bg-orange-400 rounded-lg place-content-center" @click="confirm('cart')">
                        加入购物车
                    </div>
                    <div class="grid p-2 bg-red-400 rounded-lg place-content-center" @click="confirm('buy')">
                        立即购买
                    </div>
                </div>
            </div>
        </div>
    </Popup>
    <Toast ref="toastRef" />
</template>
    
<script setup lang='ts'>

import src from '~/assets/shop/goods-detail/gd1.png'
import { useGoods } from '~/store/modules/goods'
const popupRef = ref();
const goods = useGoods();
const router = useRouter();
const toastRef = ref()
const number = ref(0)
const services: any = [
    {
        name: '换新保障服务',
        values: [
            {
                name: '1 月试用换新',
            },
            {
                name: '半年无忧换新',
            }
        ]
    },
    {
        name: '延保服务',
        values: [
            {
                name: '延长一个月保修服务',
            },
            {
                name: '延长三个月保修服务',
            }
        ]
    },
]
const skus: any = [
    {
        name: '系列',
        values: [
            {
                name: '潘婷沁润水漾洗发水',
            },
            {
                name: '潘婷深水炮弹洗发水',
            }
        ]
    },
    {
        name: '外观',
        values: [
            {
                name: '赋能 1 颗装赋能 8 颗装赋能 8 颗装赋能 8 颗装赋能 8 颗装赋能 8 颗装',
                thumb: '',
            },
            {
                name: '滋养 2 颗装',
                thumb: '',
            },
            {
                name: '清润 3 颗装',
                thumb: '',
            },
            {
                name: '赋能 4 颗装',
                thumb: '',
            },
            {
                name: '滋养 5 颗装',
                thumb: '',
            },
            {
                name: '清润 6 颗装',
                thumb: '',
            }
        ]
    }
];
const skuSelected = ref(new Array(skus.length).fill(0));
const serviceSelected = ref(new Array(skus.length).fill(0));
const confirm = (type?: string) => {
    type = goods.addType || type;
    goods.hideSku()
    if (type == 'cart') {
        toastRef.value.show('添加成功');
        return;
    }
    console.log(
        JSON.stringify(
            skus.map((sku: any, index: number) => {
                return sku.values[skuSelected.value[index]]
            }),
            null,
            2
        ),
        JSON.stringify(
            services.map((sku: any, index: number) => {
                return sku.values[serviceSelected.value[index]]
            }),
            null,
            2
        )
    )

    router.push({
        name: 'order-confirm',
        params: {
            id: 1
        },
        query: {
            source: type
        }
    })
}
watchEffect(()=>{
    if( popupRef.value?.visible){
        goods.showSku()
    }else{
        goods.hideSku()
    }
})
watchEffect(() => {
    if (goods.skuVisible) {
        popupRef.value?.open()
    } else {
        popupRef.value?.close()
    }
})
</script>
    
<style></style>